<template>
    <div class="content-wrapper ">
        
        <el-container class="container">
        <el-header style="height:auto">
            <el-row class="headInfo"  v-if="subjectId && subject">
                <el-row>
                    <el-col :span="15">
                        <span>话题主题：</span>
                        <span class="bule">{{subject.subject}}</span>
                    </el-col>
                    <el-col :span="9">
                        <span>话题时间：</span>
                        <span class="bule">{{renderTimeNoTime(subject.beginTime)}}至{{renderTimeNoTime(subject.endTime)}}</span>
                    </el-col>
                </el-row>
                <el-row>
                    <span>话题导语：</span>
                </el-row>
                <el-row>
                    <pre class="bule">{{subject.introduction}}</pre>
                </el-row>
            </el-row>
            <el-row class="handle-box" >
                <el-select v-if="!subjectId" v-model="query.position" class="mr10" filterable clearable placeholder='板块' >
                    <el-option
                        v-for="(k,v) in positions"
                        :key="v"
                        :label="k"
                        :value="v">
                    </el-option>
                </el-select>
                <el-input v-model="query.content" class="handle-input mr10" placeholder="帖子内容"/> 
                <el-select v-model="query.status" class="mr10" filterable clearable placeholder='帖子状态' >
                    <el-option
                        v-for="(k,v) in auditStatus"
                        :key="v"
                        :label="k"
                        :value="v">
                    </el-option>
                </el-select>
                <el-input v-model="query.userPhone" class="handle-input mr10" placeholder="用户号码"/> 
                <el-date-picker  class="mr10" clearable
                        @change="queryTimeChage"
                        v-model="queryTime"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                </el-date-picker>

                <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
                <el-button type="primary" icon="el-icon-setting" @click="resetQueryForm">重置</el-button>

                <el-button type="primary" icon="el-icon-plus" class="handle-del" @click="addSubject">新增</el-button>
            </el-row>
        </el-header>
        <el-main>
            <el-table
                :data="tableData"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
                @selection-change="handleSelectionChange"
            >
                <!-- <el-table-column type="selection" width="55" align="center"></el-table-column> -->
                <el-table-column type="index" width="50" align="center"></el-table-column>
                <el-table-column prop="userName" width="200" label="用户" show-overflow-tooltip />
                <el-table-column prop="content" width="150"  label="内容" show-overflow-tooltip></el-table-column>
                <el-table-column prop="imageList" width="300" label="图片" show-overflow-tooltip >
                    <template slot-scope="scope" >
                        <AudioVue v-if="scope.row.type === 3" :theUrl="mediaHttpUrl+scope.row.files" />
                        <div v-if="scope.row.type === 2" >
                            <span v-for="(img,i)  in splitImages(scope.row.files)" :key="i+1">
                                <div v-if="i%3==0" />
                                <img style="width:90px;height:90px;margin-right:3px;margin-bottom:3px"  :src="imageHttpUrl+img" />
                            </span>
                        </div>
                        <div v-if="scope.row.type === 4">
                            <img style="width:90px;height:90px;margin-right:3px;margin-bottom:3px"  :src="scope.row.media" />
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="likeNum" width="100" label="点赞" show-overflow-tooltip /> 
                <el-table-column prop="commentNum" width="100" label="评论" show-overflow-tooltip /> 
                <el-table-column prop="relayNum" width="100" label="转发" show-overflow-tooltip /> 
                <el-table-column prop="money" width="100" label="版块" show-overflow-tooltip> 
                    <template slot-scope="scope" >
                        {{positions[scope.row.position]}}
                    </template>
                </el-table-column>
                <el-table-column label="当前状态" width="150"  align="center">
                    <template slot-scope="scope" >
                        <span v-if="scope.row.status === 2" >{{status[scope.row.status+'']}}</span>
                        <span v-else>{{auditStatus[scope.row.auditStatus+'']}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="issueTime" width="150"  label="发布日期" show-overflow-tooltip>
                    <template slot-scope="scope" >
                        {{renderTime(scope.row.issueTime)}}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="240" align="center" fixed="right" >
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-zoom-in" @click="openCommentListTag(scope.row)" >详情</el-button>
                        <el-button v-if="scope.row.auditStatus === 1" type="text" icon="el-icon-check" @click="passPost(scope.row)" >通过</el-button>
                        <el-button v-if="scope.row.auditStatus === 1" type="text" icon="el-icon-close" @click="noPassPost( scope.row)" >不通过</el-button>
                        <el-button type="text" icon="el-icon-delete" @click="removePost(scope.row)" >删除</el-button>
                        <el-button v-if="scope.row.auditStatus === 2" type="text" @click="putDown(scope.row)" >下架</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-main>
        <el-footer style="height:auto" class="pagination-self">
            <el-pagination
                background
                layout="total, sizes, prev, pager, next"
                :current-page="query.pageNo"
                :page-size="query.pageSize"
                :total="pageTotal"
                @size-change="handleSizeChange"
                @current-change="handlePageChange"/>
        </el-footer>
        </el-container>

        <el-dialog 
            title='新增帖子'
            width='40%'
            :visible.sync="addDialogVisible"
            :before-close="handleClose"
            :close-on-click-modal="false"
            append-to-body>
            <post-add :subjectId="subjectId"  @handleClose='handleClose' @saveClose="saveClose" />
        </el-dialog >
    </div>

</template>

<script>
import { getCityTree } from '../../../../api/city'
import {fetchPageList,deletePost,updatePost} from '../../../../api/bbs/post'
import AudioVue from '../../../../common/Audio'
import SvgIcon from '../../../../common/SvgIcon'
import PostAdd from './PostAdd'

export default {
    name: 'subjectList',
    data() {
        return {
            mediaHttpUrl:'https://lht.ah-zk.com/qjt/fs/file/download',
            imageHttpUrl:'https://lht.ah-zk.com/qjt/fs/origin/',

            positions: {},
            status: {},
            auditStatus: {},
            addDialogVisible:false,
            query: {
                pageNo: 1,
                pageSize: 20,
                content:'',
                status:'',
                userPhone:'',
                position:'',
                beginTime:'',
                endTime:'',
                cityCode:''
            },
            queryTime:[],
            tableData: [],
            multipleSelection: [],
            pageTotal: 0,
            spaces:[],
            treeData: [],
            defaultProps: {
                children: 'children',
                label: 'name',
                isLeaf: 'leaf'
            }
        };
    },

    activated(){
        this.pageInit();
    },
    created() {
        this.pageInit();
    },
    methods: {
        putDown(row){
            updatePost({id:row.id,actionType:'putDown'}).then(res=>{
                if (res.code == "0") {
                    this.$message({ message: "下架成功", type: "success" });
                    this.fetchTableData();
                } else {
                    this.$message({ message: res.data.msg, type: "error" });
                }
            });
        },
        passPost(row){
            updatePost({id:row.id,actionType:'pass'}).then(res=>{
                if (res.code == "0") {
                    this.$message({ message: "审核通过成功", type: "success" });
                    this.fetchTableData();
                } else {
                    this.$message({ message: res.data.msg, type: "error" });
                }
            });
        },
        removePost(row){
            let that = this;
            that.$confirm('确认删除？')
            .then(_ => {
                deletePost({id:row.id}).then(res=>{
                    that.fetchTableData();
                })
            })
            .catch(_ => {});
        },
        queryTimeChage(e){
            if(e==null) {
                this.query.endTime = '';
                this.query.beginTime = '';
            }
        },
        resetQueryForm(){
            this.query = {
                pageNo: 1,
                pageSize: 20,
                content:'',
                status:'',
                userPhone:'',
                position:'',
                beginTime:'',
                endTime:'',
                cityCode:''
            };
            this.fetchTableData();
        },
        openCommentListTag(row){
            this.addTag('帖子评论列表','/bbs/post/comment/list/'+row.id,'psotCommentList_'+row.id)
        },
        splitImages(files){
            if(files){
                var filesArr = new Array();
                filesArr = files.split(",");
                return filesArr;
            }
            return []
        },
        pageInit(){
            this.enumMap('SubjectEnum.PositionEnum','com.zlll.winner.enums.bbs').then(res=>{if(res) this.positions = res });
            this.enumMap('PostEnum.StatusEnum','com.zlll.winner.enums.bbs').then(res=>{if(res) this.status = res});
            this.enumMap('PostEnum.AuditStatusEnum','com.zlll.winner.enums.bbs').then(res=>{if(res) this.auditStatus = res});

            this.fetchTreeData();
            this.fetchTableData();
        },
        handleClose(done) {
            let that = this;
            this.$confirm('确认关闭？')
            .then(_ => {
                that.addDialogVisible = !that.addDialogVisible;
                that.fetchTableData();

            })
            .catch(_ => {});
        },
         saveClose() {
            let that = this;
            that.addDialogVisible = !that.addDialogVisible
            that.fetchTableData();

        },
        addSubject(){
            this.addDialogVisible = !this.addDialogVisible
        },
        handleNodeClick(node){
            this.query.cityCode = node.code;
            this.fetchTableData();
        },
        fetchTreeData(){
            let that = this
            getCityTree().then(res=>{
                that.treeData = res.data
            })
        },
        //搜索条件方法
        handleSearch(){
            this.query.pageNo = 1;
            this.fetchTableData();
        },
        // 表格数据查询方法
        fetchTableData(){
            let that = this
            if(that.subjectId){
                that.query.subjectId = that.subjectId
            }
            if(that.queryTime && that.queryTime.length == 2){
                that.query.beginTime = that.queryTime[0].getTime();
                that.query.endTime = that.queryTime[1].getTime();
            }
            fetchPageList(that.query).then(res=>{
                that.tableData = res.data.records;
                that.pageTotal = res.data.total;
            });
        },
        // 多选操作
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 分页方法
        handlePageChange(val) {
            this.query.pageNo = val;
            this.fetchTableData();
        },
        // 分页大小改变方法
        handleSizeChange(val) {
            this.query.pageSize = val;
            this.fetchTableData();
        },
    },
    components:{AudioVue,PostAdd,SvgIcon},
    props:{
        subjectId: {
            type: String,
            required: false,
        },
        subject:{
            type: Object,
            required: false,
        }
    }
};
</script>

<style lang="stylus" scoped>
.headInfo{
    color: #606266;
    font-size:14px;
    span{
        padding-left:10px;
        line-height: 30px;
    }
    pre{
        padding-left:30px;
    }
}
 .bule{
        color:#409EFF
}

.content-wrapper{
    height:100%;
    width :100%;
    overflow-y: hidden;
}

.content-row{
    height: 100%;
}

.cityTree{
    overflow-y: scroll;
}

.height-init{
    height: 100%;
}

.container{
    height: 100%;
}

.handle-box {
    line-height:40px
}

.handle-input {
    width: 150px;
    display: inline-block;
}

.subject-list-table-row{
    height:70%;
}
.list-table-row{
    height:83%;
}

.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
.pagination-self{
    
    height:30px
    text-align: right;
    width :100%;
}
</style>
